<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>车辆管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
 <link rel="stylesheet" href="${ctx}/resources/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="${ctx}/resources/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/css/wu.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/css/icon.css" />
<script type="text/javascript" src="${ctx}/resources/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="${ctx}/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/resources/zTree/js/jquery.ztree.core.js"></script>
</head>

<body>
	 
<!-- 查询条件开始 -->
	<div class="easyui-panel" data-options="title:'查询条件',iconCls:'icon-search'" style="width:100%;">
		<form id="searchFrm" method="get">
			<table width="100%" cellpadding="10" >
				<tr>
					<td width="33%">
					<input class="easyui-textbox" name="carnumber"
							data-options="label:'车辆号牌:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
					<td width="33%"> 
					<input class="easyui-textbox" name="cartype"
							data-options="label:'车辆类型:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
					<td width="33%">
					<input class="easyui-textbox" name="color"
							data-options="label:'车辆颜色:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
				</tr>
				<tr>
					<td width="33%">
					<input class="easyui-textbox" name="description"
							data-options="label:'车辆描述:',labelPosition:'left',labelAlign:'right'"
							style="width:80%;">
					</td>
					<td width="33%">
						<label class="textbox-label" style="text-align: right;">
        				是否出租:
        			</label>
           			 <input class="easyui-radiobutton" name="isrenting" value="0">&nbsp;&nbsp;未出租&nbsp;&nbsp;&nbsp;&nbsp;
           			 <input class="easyui-radiobutton" name="isrenting" value="1">&nbsp;&nbsp;已出租
					</td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="doSearch()" data-options="iconCls:'icon-search'">查询</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#searchFrm').form('clear')" data-options="iconCls:'icon-reload'">重置</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<!-- 查询条件结束 -->
	 <div style="height: 2px"></div>
	 <!-- 数据表格开始 -->
    <table id="table" class="easyui-datagrid" style="width:100%;height:300px">
    </table>
	<div id="tb">
	<a href="javascript:void(0)" class="easyui-linkbutton" id="addCar" data-options="iconCls:'icon-add',plain:true">添加车辆</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" id="updateCar" data-options="iconCls:'icon-edit',plain:true">修改车辆</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" id="deleteCar" data-options="iconCls:'icon-remove',plain:true">删除车辆</a>
	<!-- <a href="javascript:void(0)" class="easyui-linkbutton" id="exportCar" data-options="iconCls:'icon-page-excel',plain:true">导出车辆</a> -->
	</div>
	<!-- 数据表格结束  -->
	
	<!-- 添加和修改车辆的弹出层 开始 -->
	<div id="dlg" class="easyui-dialog" style="width:700px;position: relative;" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <div style="margin-bottom:10px">
                <input name="carnumber" id="carnumber" class="easyui-textbox" required="true" label="车辆号牌:" style="width:60%">
            </div>
            <div style="margin-bottom:10px">
                <input name="cartype" class="easyui-textbox" required="true" label="车辆类型:" style="width:60%">
            </div>
            <div style="margin-bottom:10px">
                <input name="color" class="easyui-textbox" required="true" label="车辆颜色:" style="width:60%">
            </div>
            <div style="margin-bottom:10px">
                <input name="price" class="easyui-numberbox" required="true"  label="购买价格:" style="width:60%">
            </div>
             <div style="margin-bottom:10px">
                <input name="rentprice" class="easyui-numberbox" required="true"  label="出租价格:" style="width:60%">
            </div>
             <div style="margin-bottom:10px">
                <input name="deposit" class="easyui-numberbox" required="true"  label="出租押金:" style="width:60%">
            </div>
             <div style="margin-bottom:10px">
                <input name="description" class="easyui-textbox" required="true"  label="出租描述:" style="width:100%">
            </div>
             <div>
             	<label class="textbox-label" style="text-align: left;">
        				是否出租:
        			</label>
           			 <input class="easyui-radiobutton" name="isrenting" value="0">&nbsp;&nbsp;未出租&nbsp;&nbsp;
           			 <input class="easyui-radiobutton" name="isrenting" value="1">&nbsp;&nbsp;已出租&nbsp;&nbsp;
            </div>
            <img id="img_car" style="width: 38%;position: absolute;top:20px;left: 60%;height:220px" alt="" src="${ctx }/resources/images/defaultcarimg.jpg">
        	<input type="hidden" name="carimg" id="carimg" value="../resources/images/defaultcarimg.jpg">
        </form>
        
        <form id="uploadForm" method="post" enctype="multipart/form-data" novalidate style="margin:0;padding:0px 50px">
        	<div style="margin-bottom:10px">
               <input class="easyui-filebox" name="mf"  
					data-options="label:'车辆图片:',labelPosition:'left',prompt:'请选择文件',accept: 'image/*'"
					style="width:70%;">
				 <a href="#" class="easyui-linkbutton" onclick="uploadCarImg()" data-options="iconCls:'icon-add'">上传</a>
			
            </div>
        </form>
        
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveCar()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
	
	<!-- 添加和修改车辆的弹出层 结束-->

	<script type="text/javascript">
	//加载表格数据
	$("#table").datagrid({
		title:'车辆列表',
		singleSelect:true,
		collapsible:true,
        fitColumns:true,
        pagination:true,
        rownumbers:true,
        toolbar:'#tb',
        url:'${ctx}/car/loadAllCar.action',
        columns:[[
                  {field:'carnumber',title:'身份证号',align:'center',width:100},
                  {field:'cartype',title:'车辆姓名',align:'center',width:100},
                  {field:'color',title:'车辆地址',align:'center',width:100},
                  {field:'isrenting',title:'车辆性别',align:'center',width:100,formatter:function(value){
                	  if(value==0){
                 		 return "<font color=red>未出租</font>"; 
                 	  }else{
                 		  return "<font color=green>已出租</font>"; 
                 	  }
                  }},
                  {field:'price',title:'车辆电话',align:'center',width:100},
                  {field:'rentprice',title:'车辆电话',align:'center',width:100},
                  {field:'deposit',title:'车辆电话',align:'center',width:100},
                  {field:'description',title:'车辆电话',align:'center',width:100}
              ]],
              view: detailview,                              //图片加载显示方式
           	detailFormatter:function(index,row){
               	return "<img width=150 height=100 title=车辆图片 src='"+row.carimg+"'/>" ;
          	 }
       
	});
		//查询
		function doSearch(){
			var params=$("#searchFrm").serialize();
			$("#table").datagrid({
				url:'${ctx}/car/loadAllCar.action?'+params
			});
		};
		//打开添加用户的弹出层
		var url="";
		$("#addCar").click(function(){
			$("#dlg").dialog("open").dialog('setTitle','添加车辆');
			$("#fm").form("clear");//清空表格
			//设置默认图片地址
			$("#carimg").val("../resources/images/defaultcarimg.jpg"); //???
			//设置img的src
			$("#img_car").attr({src:'../resources/images/defaultcarimg.jpg'});
			//设置carnumber可写
			$("#carnumber").textbox('readonly',false);
			//由于clear会清空表单输入框内值，默认值value,check也会被清除，故需要在清空操作后，进行设置默认值
			//使用form的load方法
			$("#fm").form("load",{isrenting:0});
			url="${ctx}/car/addCar.action";
		});
		//打开修改的弹出层
		$("#updateCar").click(function(){
			//得到当前行
			var row=$("#table").datagrid('getSelected');
			if(row){
				$("#dlg").dialog("open").dialog('setTitle','修改车辆');
				//表单数据装载
				$("#fm").form("load",row);
				//设置carnumber只读
				$("#carnumber").textbox('readonly',true);
				//设置图片地址
				$("#img_car").attr({src:row.carimg});
				url="${ctx}/car/updateCar.action";
			}else{
				$.messager.show({
					title:'提示',
					msg:'请选中操作行'
				});
			}
		});
		
		
		//保存
		function saveCar(){
			$.messager.progress();	// 显示进度条
			$('#fm').form('submit', {
				url: url,                                  //数据提交地址  user/addCar.action
				onSubmit: function(){
					var isValid = $(this).form('validate');//对表单里面的required:true和vailType的数据进行验证
					if (!isValid){
						$.messager.progress('close');	    // 如果验证失败关闭进度条
					}
					return isValid;	                  //返回验证结果
				},
				success: function(obj){               //如果提交成功之后回调的方法
					$.messager.progress('close');	  // 关闭进度条
                    var result = eval('('+obj+')');    //把obj的josn字符串转成js认识的json对象
					$.messager.show({
						title:'提示',
						msg:result.msg
					});
					$("#table").datagrid("reload");    //刷新数据表格
					$("#dlg").dialog("close");         //关闭弹出层
				}
			});
		}
		//删除用户
		$("#deleteCar").click(function(){
			//得到当前行
			var row=$("#table").datagrid('getSelected');
			if(row){
				$.messager.confirm('提示','你确定要删除【'+row.carnumber+'】这个车辆吗?',function(r){
                    if (r){
                        $.post('${ctx}/car/deleteCar.action',{carnumber:row.carnumber,carimg:row.carimg},function(result){
                        	//var resu = eval('('+result+')');    为啥没用
                                $.messager.show({    
                                    title: '提示',
                                    msg: result.msg
                                });
                                $("#table").datagrid("reload");//刷新表格
                        },'json');
                    }
                });
			}else{
				$.messager.show({
					title:'提示',
					msg:'请选中操作行'
				});
			}
		});
	//车辆图片的上传
	function uploadCarImg(){
		//$("#carimgfrm")[0]是把jq对象转成js对象
		var formData=new FormData($("#uploadForm")[0]);              //?????????????
	       //var  x=$("#uploadForm") ;    //创建Object
	       // var x_js=x[0]         //HTMLFormElement转成js
	       //var x_jq=$(x_js);     //转成jq
		$.ajax({
			url:'${ctx }/upload/upload.action',
			type:'POST',
			data:formData,
			async:false,
			cache:false,
			contentType:false,
			processData:false,
			success:function(obj){
				//给图片添加属性赋值，以显示图片
				$("#img_car").attr({src:obj.path});
				//给隐藏区域的value赋值，用于把图片路径地址传入后台放进数据库
				$("#carimg").val(obj.path);
			},
			error:function(rv){
				alert(rv);
			}
		}); 
	}
		
	</script>
</body>
</html>
